<template>
  <div class="sec-main">
    <div class="search-container">
      <sec-form
        :searchBox="{ span: 6 }"
        :ruleForm="ruleForm"
        :formData="formData"
        :optionData="optionData"
        @reset="reset"
        @submitForm="submitForm"
      >
      </sec-form>
    </div>

    <div class="table-container">
      <sec-table :tableData="tableData" :tableCol="tableCol"></sec-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        background
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="totalSize"
      >
      </el-pagination>
    </div>
    <el-drawer
      :title="this.$t('审核详情')"
      size="60%"
      :visible.sync="detailDrawer"
      :modal="false"
      :close-on-press-escape="false"
    >
      <el-descriptions
        class="detail-descriptions"
        contentClassName="content-class"
        labelClassName="label-class"
        :title="this.$t('基础信息')"
        :column="2"
        border
      >
        <el-descriptions-item>
          <template slot="label">
            {{ this.$t("ID") }}
          </template>
          {{ selectRow.id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            {{ this.$t("类型") }}
          </template>
          {{ this.utils.getDicLabel("reviewType", selectRow.type) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            {{ this.$t("空间ID") }}
          </template>
          {{ selectRow.spaceId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            {{ this.$t("申请人") }}
          </template>
          {{ selectRow.user }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            {{ this.$t("创建时间") }}
          </template>
          {{ selectRow.createTime }}
        </el-descriptions-item>

        <!-- <el-descriptions-item>
          <template slot="label">
            {{ this.$t("描述") }}
          </template>
          {{ selectRow.info }}
        </el-descriptions-item> -->
      </el-descriptions>
      <el-descriptions
        v-if="selectRow.type === 0"
        class="detail-descriptions"
        contentClassName="content-class"
        labelClassName="label-class"
        :title="this.$t('空间详情')"
        :column="2"
        border
      >
        <el-descriptions-item :label="this.$t('空间名称')"> {{ spaceData.name }} </el-descriptions-item>
        <el-descriptions-item :label="this.$t('空间ID')"> {{ spaceData.spaceId }} </el-descriptions-item>
        <el-descriptions-item :label="this.$t('空间描述')"> {{ spaceData.info }} </el-descriptions-item>
      </el-descriptions>
      <!-- 任务详情 开始 -->
      <touch-detail
        v-if="selectRow.type === 1 && detailDrawer"
        :touchId="this.selectRow.detailId.split('-')[1]"
        :needRequest="true"
      ></touch-detail>
      <!-- 任务详情 结束 -->
      <!-- 审核历史 开始 -->
      <!-- <el-descriptions class="detail-descriptions" :title="this.$t('审核历史')" :column="1" border />
      <el-timeline class="review-timeline" :reverse="reverse">
        <el-timeline-item
          v-for="(activity, index) in reviewActivities"
          :key="index"
          :timestamp="activity.timestamp"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline> -->
      <!-- 审核历史 结束 -->
      <!-- <div
        v-if="!isPreviewed && isTouchReview"
        style="text-align: center; font-size: 10px; margin-bottom: 10px; color: lightsalmon"
      >
        {{ this.$t("预览后可执行 “通过/驳回”") }}
      </div> -->
      <!-- 底部按钮 开始 -->
      <div class="detail-bottom">
        <div class="detail-button">
          <el-tooltip class="item" effect="dark" :content="$t('向自己发一份触达，用以预览效果')" placement="top-start">
            <el-button type="primary" v-if="isTouchReview" @click="cratePreviewTouch"> {{ this.$t("预览") }}</el-button>
          </el-tooltip>
        </div>
        <div class="detail-button">
          <el-button type="primary" @click="openHandleUrl">{{ this.$t("处置") }}</el-button>
        </div>
      </div>
      <!-- 底部按钮 结束 -->
      <br />
    </el-drawer>
  </div>
</template>

<script>
import TouchDetail from "views/touch/detail.vue";
import { paginationMixin } from "@/mixins/pagination";
import {
  reviewPageApi,
  reviewUpdateApi,
  reviewDelteApi,
  reviewDetailApi,
  spaceDetailApi,
  touchDetailTaskApi,
  previewTouchApi,
} from "api/dataCenter.js";

export default {
  mixins: [paginationMixin],
  components: { TouchDetail },
  data() {
    return {
      optionData: {},
      formData: [
        {
          type: "select",
          filterable: true,
          clearable: false,
          label: this.$t("状态"),
          prop: "status",
          span: 6,
          optionData: [
            { label: this.$t("审核中"), value: 0 },
            { label: this.$t("审核成功"), value: 1 },
            { label: this.$t("审核驳回"), value: 2 },
            { label: this.$t("全部"), value: "" },
          ],
          change: (data) => {
            this.submitForm();
          },
        },
        {
          type: "text",
          clearable: true,
          label: this.$t("空间ID"),
          prop: "spaceId",
          span: 6,
        },
        {
          type: "text",
          clearable: true,
          //   filterable: true,
          label: this.$t("申请人"),
          prop: "user",
          span: 6,
        },
      ],
      ruleForm: { user: "", reviewUser: "", spaceId: "", status: 0 },
      tableData: [],
      tableCol: [
        { label: this.$t("ID"), prop: "id" },
        { label: this.$t("空间ID"), prop: "spaceId" },
        { label: this.$t("详情ID"), prop: "detailId" },
        { label: this.$t("名称"), prop: "name" },
        { label: this.$t("申请人"), prop: "user" },
        {
          label: this.$t("类型"),
          prop: "type",
          formatter: (data) => {
            return this.utils.getDicLabel("reviewType", data.type);
          },
        },
        {
          label: this.$t("状态"),
          prop: "status",
          formatter: (data) => {
            return this.utils.getDicLabel("reviewStatus", data.status);
          },
        },
        // { label: this.$t("有效性"), prop: "valid" },
        { label: this.$t("创建时间"), prop: "createTime" },
        { label: this.$t("更新时间"), prop: "updateTime" },
        {
          type: "operation",
          label: "操作",
          width: 60,
          children: [
            {
              label: this.$t("详情"),
              click: (data) => {
                this.detail(data);
              },
            },
          ],
        },
      ],
      detailDrawer: false,
      reverse: false,
      reviewActivities: [],
      selectRow: {},
      taskReviewList: [],
      spaceData: { name: "", spaceId: "" },
      touchData: {},
      previewTasks: [],
      isTouchReview: false,
      isPreviewed: false,
      visible: false,
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      this.getRiviewData(); //初始化表格数据
    },
    //获取表格数据
    getRiviewData() {
      //打开loading
      let loading = this.openLoading(".sec-main");
      reviewPageApi({
        pageNum: this.page,
        pageSize: this.pageSize,
        requestData: {
          user: this.ruleForm.user,
          spaceId: this.ruleForm.spaceId,
          status: this.ruleForm.status,
        },
      }).then((res) => {
        // console.log("[ res ] >", res);
        loading.close();
        let { list, pageNum, pageSize, pages, total } = res.data;
        this.tableData = list;
        this.totalSize = total;
      });
    },
    // 搜索
    submitForm() {
      this.page = 1;
      this.getRiviewData();
    },
    reset() {
      this.page = 1; //每次点击重置的时候都是第一页
      this.getRiviewData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getRiviewData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getRiviewData();
    },
    detail(data) {
      // console.log("data", data);
      this.detailDrawer = true;
      this.selectRow = data.row;
      this.spaceData = { name: "", spaceId: "" };
      this.touchData = { title: "", msgChannel: "", msgAccountId: "", sender: "", receiver: "", content: "" };
      if (this.selectRow.type === 0) {
        this.isTouchReview = false;
        let spaceId = this.selectRow.detailId.split("-")[1];
        spaceDetailApi({ requestData: spaceId }).then((res) => {
          // console.log("res >", res);
          if (res.code === 0) {
            this.spaceData = res.data;
          }
        });
      } else if (this.selectRow.type === 1) {
        this.isTouchReview = true;
        console.log(this.selectRow);
        this.touchData = {};
        touchDetailTaskApi({
          requestData: this.selectRow.detailId.split("-")[1],
        }).then((res) => {
          console.log("touchDetailTaskApi res", res);
          if (res.code === 0) {
            this.touchData = res.data;
          }
        });
      }
    },
    openHandleUrl() {
      let { handleUrl } = this.selectRow;
      if (handleUrl) {
        window.open(handleUrl);
      } else {
        this.message.error({ message: this.$t("处置地址有误，请联系管理员") });
      }
    },
    approve() {
      console.log("approve", this.selectRow);
      let loading = this.openLoading(".sec-main");
      reviewUpdateApi({
        id: this.selectRow.id,
        status: 1, //通过
      }).then((res) => {
        console.log("[ approve_res ] >", res);
        loading.close();
        // let { list, pageNum, pageSize, pages, total } = res.data;
        if (res.code === 0) {
          this.message.success({
            message: this.$t("已通过"),
          });
          this.detailDrawer = false;
          this.initPage();
        }
      });
    },
    reject() {
      console.log("reject", this.selectRow);
      let loading = this.openLoading(".sec-main");
      reviewUpdateApi({
        id: this.selectRow.id,
        status: 2, //驳回
      }).then((res) => {
        console.log("[ reject_res ] >", res);
        loading.close();
        // let { list, pageNum, pageSize, pages, total } = res.data;
        if (res.code === 0) {
          this.message.success({
            message: this.$t("已驳回"),
          });
          this.detailDrawer = false;
          this.initPage();
        }
      });
    },
    cratePreviewTouch() {
      let { id, msgChannel } = this.touchData;
      let msg = msgChannel == 1 ? this.$t("预览发送成功，请到DC查看详情") : this.$t("预览发送成功，请到邮箱查看详情");
      previewTouchApi({
        requestData: { id },
      }).then((res) => {
        if (res.code !== 0) return;
        this.message.success({
          message: msg,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__body {
  padding: 10px 20px !important;
}
.detail-descriptions {
  margin-bottom: 10px;
}
.review-timeline {
  font-size: 13px;
}
::v-deep .content-class {
  word-wrap: break-word;
  word-break: break-all;
}
::v-deep .label-class {
  width: 100px;
}
// ::v-deep .my-content {
//   height: 100px;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   display: -webkit-box;
//   -webkit-line-clamp: 5;
//   word-wrap: break-word;
//   word-break: break-all;
//   -webkit-box-orient: vertical;
// }
.detail-bottom {
  display: flex;
  justify-content: center;
  .detail-button {
    padding: 15px 10px 10px 10px;
  }
}
</style>
